<script setup lang="ts">
import { computed, inject, onMounted, ref, watch } from 'vue';
import { Button } from 'ant-design-vue';
import { HttpMethodText, Icon, modal, notification, Table } from '@xcan-angus/vue-ui';
import { utils, ProjectPageQuery, PageQuery } from '@xcan-angus/infra';
import { useI18n } from 'vue-i18n';
import { BasicProps } from '@/types/types';

import { apis } from '@/api/tester';
import { getCurrentPage } from '@/utils/utils';


import {ApiInfo} from "@/views/apis/services/protocol/types";

const props = withDefaults(defineProps<BasicProps>(), {
  projectId: undefined,
  params: undefined,
  total: 0,
  notify: undefined,
  deletedNotify: undefined
});

const { t } = useI18n();

const emit = defineEmits<{
  (e: 'update:total', value: number): void;
  (e: 'update:deletedNotify', value: string): void;
}>();

// eslint-disable-next-line @typescript-eslint/no-empty-function
const addTabPane = inject<(data: any) => void>('addTabPane', () => { });
// eslint-disable-next-line @typescript-eslint/no-empty-function
const deleteTabPane = inject<(data: any) => void>('deleteTabPane', () => { });
const updateRefreshNotify = inject<(value: string) => void>('updateRefreshNotify');

const tableData = ref<ApiInfo[]>();
const loading = ref(false);
const loaded = ref(false);
const orderBy = ref<string>();
const orderSort = ref<PageQuery.OrderSort>();
const pagination = ref<{
  total: number;
  current: number;
  pageSize: number;
  showSizeChanger: false;
  size: 'small';
  showTotal:(value: number) => string;
    }>({
      total: 0,
      current: 1,
      pageSize: 5,
      showSizeChanger: false,
      size: 'small',
      showTotal: (total: number) => {
        if (typeof pagination.value === 'object') {
          const totalPage = Math.ceil(total / pagination.value.pageSize);
          return t('pagination.pageInfo', {
            current: pagination.value.current,
            totalPage: totalPage
          });
        }
      }
    });

const toCreateApi = () => {
  addTabPane({ name: t('apisHome.myApis.emptyStates.addApiAction'), value: 'API', _id: utils.uuid() + 'API' });
};

const openApi = (api) => {
  addTabPane({ name: api.apisName || api.summary, value: 'API', id: api.apisId || api.id, _id: (api.apisId || api.id) + 'API' });
};

const tableChange = (
  { current = 1, pageSize = 10 },
  _filters,
  sorter: { orderBy: string; orderSort: PageQuery.OrderSort; }
) => {
  orderBy.value = sorter.orderBy;
  orderSort.value = sorter.orderSort;
  pagination.value.current = current;
  pagination.value.pageSize = pageSize;
  loadData();
};

const loadData = async () => {
  loading.value = true;
  const { current, pageSize } = pagination.value;
  const params: ProjectPageQuery & {
    createdBy?: string;
    favouriteBy?: boolean;
    followBy?: boolean;
  } = {
    projectId: props.projectId,
    pageNo: current,
    pageSize
  };

  if (orderSort.value) {
    params.orderBy = orderBy.value;
    params.orderSort = orderSort.value;
  }

  if (props.params) {
    if (props.params.createdBy) {
      params.createdBy = props.params.createdBy;
    }
    if (props.params.favouriteBy) {
      params.favouriteBy = props.params.favouriteBy;
    }
    if (props.params.followBy) {
      params.followBy = props.params.followBy;
    }
  }
  const [error, res] = await apis.getApiList(params);
  loading.value = false;
  loaded.value = true;
  if (error) {
    return;
  }

  const data = res?.data;
  tableData.value = data?.list;
  const total = +(data?.total || 0);
  pagination.value.total = total;
  emit('update:total', total);
};

const deleteHandler = (data: ApiInfo) => {
  modal.confirm({
    content: t('actions.tips.confirmDelete', { name: data.summary }),
    async onOk () {
      const id = data.id;
      const params = { ids: [id] };
      const [error] = await apis.deleteApi(params);
      if (error) {
        return;
      }

      notification.success(t('actions.tips.deleteSuccess'));
      emit('update:deletedNotify', utils.uuid());

      deleteTabPane([id + 'API', id + 'socket', id + 'execute']);

      if (typeof updateRefreshNotify === 'function') {
        updateRefreshNotify(utils.uuid());
      }
    }
  });
};

const cancelFavourite = async (data: ApiInfo) => {
  loading.value = true;
  const [error] = await apis.cancelFavourite(data.id);
  loading.value = false;
  if (error) {
    return;
  }

  notification.success(t('actions.tips.cancelFavouriteSuccess'));
  await loadData();

  if (typeof updateRefreshNotify === 'function') {
    updateRefreshNotify(utils.uuid());
  }
};

const cancelFollow = async (data: ApiInfo) => {
  loading.value = true;
  const [error] = await apis.cancelFollow(data.id);
  loading.value = false;
  if (error) {
    return;
  }

  notification.success(t('actions.tips.cancelFollowSuccess'));
  await loadData();

  if (typeof updateRefreshNotify === 'function') {
    updateRefreshNotify(utils.uuid());
  }
};

onMounted(() => {
  watch(() => props.projectId, () => {
    loadData();
  }, { immediate: true });

  watch(() => props.notify, (newValue) => {
    if (newValue === undefined || newValue === null || newValue === '') {
      return;
    }

    loadData();
  }, { immediate: true });

  watch(() => props.refreshNotify, (newValue) => {
    if (newValue === undefined || newValue === null || newValue === '') {
      return;
    }

    pagination.value.current = getCurrentPage(pagination.value.current, pagination.value.pageSize, pagination.value.total);
    loadData();
  }, { immediate: true });
});

const columns = computed(() => {
  const _columns: {
    title: string;
    dataIndex: string;
    ellipsis?: boolean;
    sorter?: boolean;
    width?: string | number;
    actionKey?: 'createdBy' | 'favouriteBy' | 'followBy';
  }[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      ellipsis: true,
      width: 160
    },
    {
      title: t('common.name'),
      dataIndex: 'summary',
      ellipsis: true,
      sorter: true,
      width: '45%'
    },
    {
      title: t('common.path'),
      dataIndex: 'endpoint',
      ellipsis: true,
      width: '55%'
    },
    {
      title: t('common.status'),
      dataIndex: 'status',
      width: 120
    },
    {
      title: t('common.createdDate'),
      dataIndex: 'createdDate',
      ellipsis: true,
      sorter: true,
      width: 160
    }
  ];

  const actionColumn: {
    title: string;
    dataIndex: string;
    ellipsis?: boolean;
    sorter?: boolean;
    width?: string | number;
    actionKey?: 'favouriteBy' | 'followBy';
  } = {
    title: t('common.actions'),
    dataIndex: 'action',
    width: 80
  };

  const _params = props.params;
  if (_params) {
    if (_params.favouriteBy) {
      actionColumn.actionKey = 'favouriteBy';
    } else if (_params.followBy) {
      actionColumn.actionKey = 'followBy';
    }
  }

  _columns.push(actionColumn);

  return _columns;
});

const emptyTextStyle = {
  margin: '14px auto',
  height: 'auto'
};
</script>
<template>
  <div>
    <template v-if="loaded">
      <template v-if="!tableData?.length">
        <div class="flex-1 flex flex-col items-center justify-center">
          <img class="w-27.5" src="../../../assets/images/nodata.png">
          <div class="flex items-center text-theme-sub-content text-3 leading-5">
            <template v-if="!!props.params?.createdBy">
              <span>{{ t('apisHome.myApis.emptyStates.noCreatedApis') }}</span>
              <Button
                type="link"
                size="small"
                class="py-0 px-1 h-5 leading-5"
                @click="toCreateApi">
                {{ t('apisHome.myApis.emptyStates.addApiAction') }}
              </Button>
            </template>

            <template v-else-if="!!props.params?.favouriteBy">
              <span>{{ t('apisHome.myApis.emptyStates.noFollowedApis') }}</span>
            </template>

            <template v-else-if="!!props.params?.followBy">
              <span>{{ t('apisHome.myApis.emptyStates.noFavouriteApis') }}</span>
            </template>
          </div>
        </div>
      </template>

      <Table
        v-else
        :dataSource="tableData"
        :columns="columns"
        :pagination="pagination"
        :loading="loading"
        :emptyTextStyle="emptyTextStyle"
        :minSize="5"
        rowKey="id"
        size="small"
        @change="tableChange">
        <template #bodyCell="{ record, column }">
          <div
            v-if="column.dataIndex === 'summary'"
            class="link truncate"
            :title="record.summary"
            @click="openApi(record)">
            {{ record.summary }}
          </div>

          <div
            v-else-if="column.dataIndex === 'endpoint'"
            :title="record.endpoint"
            class="truncate">
            <HttpMethodText :value="record.method" />
            <span class="truncate">{{ record.endpoint }}</span>
          </div>

          <div
            v-else-if="column.dataIndex === 'status'"
            :title="record.status?.message"
            :class="'api-status-' + record.status?.value"
            class="truncate">
            {{ record.status?.message }}
          </div>

          <div v-else-if="column.dataIndex === 'action'">
            <template v-if="column.actionKey === 'favouriteBy'">
              <Button
                :title="t('actions.cancelFavourite')"
                size="small"
                type="text"
                class="space-x-1 flex items-center py-0 px-1"
                @click="cancelFavourite(record)">
                <Icon icon="icon-quxiaoshoucang" class="text-3.5 cursor-pointer text-theme-text-hover" />
              </Button>
            </template>

            <template v-else-if="column.actionKey === 'followBy'">
              <Button
                :title="t('actions.cancelFollow')"
                size="small"
                type="text"
                class="space-x-1 flex items-center py-0 px-1"
                @click="cancelFollow(record)">
                <Icon icon="icon-quxiaoguanzhu" class="text-3.5 cursor-pointer text-theme-text-hover" />
              </Button>
            </template>

            <template v-else>
              <Button
                :title="t('actions.delete')"
                size="small"
                type="text"
                class="space-x-1 flex items-center py-0 px-1"
                @click="deleteHandler(record)">
                <Icon icon="icon-qingchu" class="text-3.5 cursor-pointer text-theme-text-hover" />
              </Button>
            </template>
          </div>
        </template>
      </Table>
    </template>
  </div>
</template>
<style scoped>
.link {
  color: #1890ff;
  cursor: pointer;
}

.api-status-UNKNOWN {
  color: rgba(140, 140, 140, 100%);
}

.api-status-IN_DESIGN {
  color: rgba(255, 129, 0, 100%);
}

.api-status-IN_DEV {
  color: rgba(0, 119, 255, 100%);
}

.api-status-DEV_COMPLETED {
  color: rgba(82, 196, 26, 100%);
}

.api-status-RELEASED {
  color: rgb(56, 158, 13, 100%);
}

:deep(.ant-pagination) {
  margin-bottom: 0;
}
</style>
